<template>
  <div class="page-nav" v-if="local || showNav">
    <a-breadcrumb>
      <a-breadcrumb-item v-for="(k, i) in breadcrumb" :key="i">
        <router-link :to="toPath(k)">{{ k.meta.title || metaTitle }}</router-link>
      </a-breadcrumb-item>
    </a-breadcrumb>
    <div class="page-title">
      <a-icon
        class="back"
        v-if="breadcrumb[breadcrumb.length-1].meta.breadBack"
        type="arrow-left"
        @click="goback()"
      />
      <span>{{ breadcrumb[breadcrumb.length-1].meta.breadTitle || breadcrumb[breadcrumb.length-1].meta.title || metaTitle }}</span>
    </div>
    <div class="slot">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { asyncRouterMap } from '@/config/router.config'

export default {
  props: ['local'],
  data () {
    return {
      breadcrumb: [],
      metaTitle: ''
    }
  },
  computed: {
    showNav () {
      return !this.breadcrumb[this.breadcrumb.length - 1].meta.breadHide
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler () {
        this.metaTitle = ''
        this.breadcrumb = this.findRoute('', asyncRouterMap[0].children)
      }
    }
  },
  mounted () {
    this.$globalVue.$on('setMetaTitle', (e) => {
      this.metaTitle = e
    })
  },
  methods: {
    findRoute (arr, targetArr) {
      if (!arr) {
        arr = []
      }
      for (const v of targetArr) {
        const arr2 = JSON.parse(JSON.stringify(arr))
        if (v.name === this.$route.name) {
          if ((v.meta.showBread == null || v.meta.showBread === true)) {
            arr2.push(v)
          }
          return arr2
        } else if (v.children) {
          if ((v.meta.showBread == null || v.meta.showBread === true)) {
            arr2.push(v)
          }
          const res = this.findRoute(arr2, v.children)
          if (res) return res
        }
      }
    },
    toPath (e) {
      // 设置项目总览面包屑跳转path
      if (e.name === 'overview' && !['SYS_ADMIN', 'PROJECT_ADMIN', 'SYS_FINANCE', 'SYS_BIZ'].includes(this.$store.getters.roles[0].code)) {
        return '/high'
      }
      return e.path
    },
    goback () {
      this.$router.back()
    }
  }
}
</script>

<style lang="less" scoped>
.page-nav {
  width:100%;
  background: #fff;
  padding: 15px;
  margin-bottom: 5px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  position: relative;
  i {
    cursor: pointer;
    margin-right: 6px;
  }
}
.page-title {
  margin-top: 20px;
  font-size: 20px;
  font-weight: bold;
  .back {
    padding-right: 10px;
  }
}
/deep/.ant-breadcrumb {
  font-size: 12px;
}
.slot {
  position: relative;
  bottom: -16px;
  /deep/.ant-tabs-bar {
    margin: 0;
    border-bottom: none;
    .ant-tabs-ink-bar {
      height: 3px;
    }
  }
}
</style>
